﻿@model List<WebShop.Models.ProductModel>

@{
    ViewBag.Title = "Perfumes";
}

<script src="@Url.Content("~/Scripts/jquery.postify.js")" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/product.css")" />

<h2>Perfumes</h2>

<div class="product" style="display: none;">
   <img src="../Content/images/sample.jpg" />
   <p>description text</p>
   <div class="price-container">
        <label class="price">99.99грн</label>
        <div class="btn-buy">Buy</div>
   </div>
</div>

<script type="text/javascript">
    //var products = $.parseJSON(@Html.Raw(Json.Encode(ViewData["Products"])));
    var filterGroups = $.parseJSON(@Html.Raw(Json.Encode(ViewData["FilterGroups"])));
    var template;
    var filter = new Array();

    $(document).ready(function () {
        template = $('div.product').clone().css('display','block');
        @foreach(var product in Model){
            <text>
            GetPerfumeProduct('@product.Name', '@product.Price').appendTo($('#center'));
            </text>
        }

        BuildFilters();
    });

    GetPerfumeProduct = function(perfume, price){
        var clone = template.clone();
        clone.find('p').text(perfume);
        clone.find('.price').text(price + 'грн');
        clone.find('img').width(130).height(130);
        clone.addClass('product');
        return clone;
    }

    RenderProducts = function(products){
        $('#center div.product').remove();
        for (var i = 0; i < products.length; i++) {
            GetPerfumeProduct(products[i].Name, products[i].Price).appendTo($('#center'));
        }
    }

    BuildFilters = function(){
        for (var i = 0; i < filterGroups.length; i++) {
            var groupbox = $('<fieldset>').append($('<legend>').text(filterGroups[i].Name)).appendTo($('#left'));
            var list = $('<ul>').appendTo(groupbox);
            var li;

            var checkbox;
            var link;

            for (var j = 0; j < filterGroups[i].Properties.length; j++) {
                li = $('<li>').appendTo(list);
                li[0]['obj'] = filterGroups[i].Properties[j];
                checkbox = $('<input>').attr('type', 'checkbox').appendTo(li).click(FilterCheckboxClick);
                link = $('<a>').attr('href', '').append($('<span>').text(filterGroups[i].Properties[j].PropertyName)).appendTo(li);
            }
        }
    }

    FilterCheckboxClick = function(ev){
        //group count
        var groupCount = 0;
        var groups = $('#left ul');
        for (var i = 1; i < groups.length; i++) {
            if ($('input:checked', groups[i]).length > 0) {
                groupCount++;
            }
        }

        var criterias = $('#left input:checked');
        filter = new Array();
        for (var i = 0; i < criterias.length; i++) {
            filter.push($(criterias[i]).parent()[0].obj);
        }

        var subcategoryId = $(this).parent()[0].obj.SubcategoryId;
        $.ajaxSetup({async: false});
        $.post('@Url.Action("GetFilteredData","Product")', $.postify({ filterProperties: filter, groupCount: groupCount }) , function(products){
            RenderProducts(products);
        });
    }
</script>